
                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">WYSIWYG Summernote Editor</h3>
					    </div>
					    <div class="panel-body">
					
					        <!--Summernote-->
					        <!--===================================================-->
					        <div id="demo-summernote">
					            <h4><span style="color: rgb(206, 198, 206); font-family: inherit; line-height: 1.1;">Please, write text here!</span><br></h4><h4><font color="#9c9c94"></font></h4>
					        </div>
					        <!--===================================================-->
					        <!-- End Summernote -->
					
					    </div>
					</div>
					
					
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">Full width content</h3>
					    </div>
					
					    <!--Summernote-->
					    <!--===================================================-->
					    <div id="demo-summernote-full-width" class="full-content">
					        <h4><span style="color: rgb(206, 198, 206); font-family: inherit; line-height: 1.1;">Please, write text here!</span><br></h4><h4><font color="#9c9c94"></font></h4>
					    </div>
					    <!--===================================================-->
					    <!-- End Summernote -->
					
					</div>
					
					
					
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">Air-mode</h3>
					    </div>
					    <div class="panel-body">
					
					        <!--Summernote Air-mode-->
					        <!--===================================================-->
					        <div id="demo-summernote-airmode">
					            <h4>Select a text to reveal the toolbar.</h4>
					            <p>Air-mode gives clearer interface with hidden toolbar.<br>
					            To reveal toolbar, select a text where you want to shape up. Simply turn on <code>airMode</code> and just focus on text.</p>
					            <br>
					            <p>This is an Air-mode editable area.</p>
					            <ul>
					                <li>Select a text to reveal the toolbar.</li>
					                <li>Edit <b>rich document on-the-fly, so elastic!</b></li>
					            </ul>
					            <p>End of air-mode area</p>
					        </div>
					        <!--===================================================-->
					        <!-- End Summernote Air-mode-->
					
					    </div>
					</div>
					
					
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">Click to edit</h3>
					    </div>
					    <div class="panel-body">
					        <p>You can edit content on the fly.</p>
					        <button id="demo-edit-text" class="btn btn-primary" type="button">Edit</button>
					        <button id="demo-save-text" class="btn btn-primary" type="button">Save</button>
					
					        <hr>
					
					        <!--Summernote-->
					        <!--===================================================-->
					        <div id="demo-summernote-edit">
					            <h4 class="text-main">Super simple WYSIWYG editor on Bootstrap</h4>
					            <p>Far far away, behind the word mountains, far from the countries Vokalia
					                and Consonantia, there live the blind texts. Separated they live in
					                Bookmarksgrove right at the coast of the Semantics, a large language
					                ocean.
					            </p>
					        </div>
					        <!--===================================================-->
					        <!-- End Summernote -->
					
					    </div>
					</div>
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->
<script>

//Forms-Text-Editor.js
//====================================================================
//This file should not be included in your project.
//This is just a sample how to initialize plugins or components.
//
//- ThemeOn.net -


$(document).ready(function() {

 // SUMMERNOTE
 // =================================================================
 // Require Summernote
 // http://hackerwins.github.io/summernote/
 // =================================================================
 $('#demo-summernote, #demo-summernote-full-width').summernote({
     height : '230px'
 });




 // SUMMERNOTE AIR-MODE
 // =================================================================
 // Require Summernote
 // http://hackerwins.github.io/summernote/
 // =================================================================
 $('#demo-summernote-airmode').summernote({
     airMode: true
 });





 // SUMMERNOTE CLICK TO EDIT
 // =================================================================
 // Require Summernote
 // http://hackerwins.github.io/summernote/
 // =================================================================
 $('#demo-edit-text').on('click', function(){
     $('#demo-summernote-edit').summernote({focus: true});
 });


 $('#demo-save-text').on('click', function(){
     $('#demo-summernote-edit').summernote('destroy');
 });

})

</script>